<template>
  <div class="physicalExamination">
    <mains :title="pageTitle">
      <template v-slot:btn>
        <Button v-if="showAddBtn" type="primary" @click="handleAdd">{{ addBtnText }}</Button>
        <Button v-if="showSearchBtn" type="default" icon="ios-search" @click="handleSearch">搜索</Button>
      </template> 
    </mains>

    <!-- 导航按钮组，替代原来的标签页 -->
    <div class="flex mb-4 space-x-2">
      <Button 
        :type="activeComponent === 'package' ? 'primary' : 'default'" 
        @click="switchComponent('package')"
      >
        体检套餐
      </Button>
      <Button 
        :type="activeComponent === 'item' ? 'primary' : 'default'" 
        @click="switchComponent('item')"
      >
        体检项目
      </Button>
      <Button 
        :type="activeComponent === 'type' ? 'primary' : 'default'" 
        @click="switchComponent('type')"
      >
        套餐类型
      </Button>
    </div>

    <!-- 动态组件区域 -->
    <component 
      :is="currentComponent" 
      @refresh="fetchData"
      class="component-container"
      :key="activeComponent"
    />
  </div>
</template>

<script setup lang="ts">
import mains from '@/components/main.vue'

import { ref, computed } from 'vue'
import PackageManagement from '../../components/physicalExamination/PackageManagement.vue'
import ItemManagement from '../../components/physicalExamination/ItemManagement.vue'
import TypeManagement from '../../components/physicalExamination/TypeManagement.vue'




// 定义组件配置的类型
type ComponentConfig = {
  [key: string]: {
    component: any;
    title: string;
    btnText: string;
    showSearch: boolean;
    showAdd: boolean;
  };
};

// 或更精确地定义：
interface ConfigItem {
  component: any;
  title: string;
  btnText: string;
  showSearch: boolean;
  showAdd: boolean;
}

type ComponentKey = 'package' | 'item' | 'type';

const componentConfig: Record<ComponentKey, ConfigItem> = {
  package: {
    component: PackageManagement,
    title: '体检套餐管理',
    btnText: '新增套餐',
    showSearch: true,
    showAdd: true
  },
  item: {
    component: ItemManagement,
    title: '体检项目管理',
    btnText: '新增项目',
    showSearch: true,
    showAdd: true
  },
  type: {
    component: TypeManagement,
    title: '套餐类型管理',
    btnText: '新增类型',
    showSearch: false,
    showAdd: true
  }
}

// 当前活跃组件
const activeComponent = ref<ComponentKey>('package')

// 计算当前组件配置
const currentConfig = computed(() => componentConfig[activeComponent.value])



// 头部相关计算属性
const pageTitle = computed(() => currentConfig.value.title)
const addBtnText = computed(() => currentConfig.value.btnText)
const showSearchBtn = computed(() => currentConfig.value.showSearch)
const showAddBtn = computed(() => currentConfig.value.showAdd)
const currentComponent = computed(() => currentConfig.value.component)

// 切换组件
const switchComponent = (name: ComponentKey) => {
  activeComponent.value = name
  fetchData() // 切换组件时刷新数据
}

const handleAdd = () => {
  console.log('点击了新增按钮:', addBtnText.value)
  // 这里可以触发子组件的新增方法
}

const handleSearch = () => {
  console.log('执行搜索操作')
}

const fetchData = () => {
  console.log('刷新数据:', currentComponent.value)
}
</script>

<style scoped>
.component-container {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #e8eaec;
  border-radius: 4px;
  background: white;
}
</style>